<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-15 16:50:46
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-25 20:20:37
-->
<template>
    <div>
        <el-form :inline="true" :model="serachFrom" ref="searchFormRef" class="demo-form-inline">
            <el-form-item label="账号" prop="username">
                <el-input v-model="serachFrom.username" placeholder="输入账号" />
            </el-form-item>
            <el-form-item label="姓名" prop="realname">
                <el-input v-model="serachFrom.realname" placeholder="输入姓名" />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="serachFrom.sex" placeholder="选择性别">
                    <el-option label="先生" value="1" />
                    <el-option label="女士" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="日期" prop="birthday">
                <el-date-picker v-model="serachFrom.birthday" type="date" value-format="YYYY-MM-DD" placeholder="选择日期"
                    :disabled-date="disableDateHandle" @focus="setDateValue" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchSubmit">搜索一下</el-button>
                <el-button type="info" @click="searchReset">重置搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">

/**
 * 导入配置
 * FormInstance组件实例
 * reactive 对象的属性成为响应
 * 指定年份日期
 * 返回非空的对象
 * 把对象转成query字符串
 * 路由
 */
import type { FormInstance } from 'element-plus';
import { reactive, ref, watchEffect } from 'vue'
import { getFullYearDay } from "@/utils/Tools/yearAndDate";

import { objToQueryString } from '@/utils/Tools/ObjectToCharacter';
import { useRouter, useRoute } from 'vue-router';
import noEmptySearchObject from '@/utils/Tools/JudgmentObject';

/**
 * 解析数据
 */
const [dateStr, dateObj] = getFullYearDay(-23)

/**
 * 定义Props
 */
interface IProps {
    page: number
    loadData: (page: number, query: object) => void
}


/**
 * 接收props数据
 */
const props = defineProps<IProps>()

/**
 * 定义数据
 * serachFrom  搜索表单数据
 *  通过ref获取form组件的实例------声明 searchFormRef 的类型为 FormInstance
 * 获取当前时间
 * 定义路由
 * 路由对象
 */
const serachFrom = reactive({
    username: '',
    realname: '',
    sex: '',
    birthday: ''
})
const searchFormRef = ref<FormInstance>()
const defaultDateTime = dateObj.valueOf()
const router = useRouter()
const route = useRoute()




/**
 * 事件操作
 * searchSubmit  搜索提交
 * searchReset  重置搜索
 * 设置日期-- 聚焦时设置默认值，这样达到可选方案
 * 禁用日期
 * 侦听搜索玩刷新页面配置
 */
const searchSubmit = () => {
    let query = noEmptySearchObject(serachFrom)
    let querqData = {} as any
    if (query !== null) {
        querqData = query
    }
    props.loadData(1, querqData)
    router.replace({ query: { ...querqData, page: 1 } })
}
const searchReset = () => {
    if (!searchFormRef.value) return
    searchFormRef.value.resetFields()
}
const setDateValue = () => {
    serachFrom.birthday = dateStr
}
const disableDateHandle = (date: Date) => {
    return date.getTime() > defaultDateTime
}
watchEffect(() => {
    const query = route.query as typeof serachFrom
    serachFrom.username = query.username || ''
    serachFrom.realname = query.realname || ''
    serachFrom.sex = query.sex || ''
    serachFrom.birthday = query.birthday || ''
})
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}
</style>